import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { connect } from 'react-redux';

import style from './css/index.module.css';

function Films(props) {
  const { showBar } = props;
  return (
    <>
      {showBar && (
        <>
          <div className={style.swiper}>Film 轮播</div>
          <ul className={style.navbar}>
            <li>
              <NavLink to='/film/nowPlaying'>正在热映</NavLink>
            </li>
            <li>
              <NavLink to='/film/comingSoon'>即将上映</NavLink>
            </li>
          </ul>
        </>
      )}

      <Outlet />
    </>
  );
}

const MapStateToPropsParam = (state) => {
  return {
    showBar: state.TabbarReducer.showBar,
  };
};

export default connect(MapStateToPropsParam)(Films);
